<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <!-- 生产环境中不建议使用 -->
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<style>
    .mydiv {
        width: 200px;
        height: 200px;
        border: 1px solid red;
    }

    button.active {
        background: #000;
        color: white;
    }
</style>

<body>
    <div id="app">

    </div>
</body>
<script type="text/babel">

    class Tab extends React.Component{
        constructor(){
            super()
            this.state={
                index:0,
                timer:null

            }
        }
        changed(v){
            this.setState({
                index:v
            })
        }

        componentDidMount(){
            this.autoPlay()
        }

        autoPlay(){
            clearInterval(this.timer)
            this.timer = setInterval(() => {
                let index = this.state.index;
                index++;
                index == this.props.tabJSON.topVal.length && (index = 0)
                this.setState({
                    index:index
                })
            }, this.props.tabJSON.timer); 
        }

        mouseOverFn(){
            clearInterval(this.timer)
        }

        mouseOutFn(){
            this.autoPlay()
        }

        render(){
            //console.log(this.props.tabJSON);
            return  (<div onMouseOver={this.mouseOverFn.bind(this)} onMouseOut={this.mouseOutFn.bind(this)}>
                    <TopNode topVal={this.props.tabJSON.topVal} myIndex={this.state.index} childShow={this.changed.bind(this)}/>
                    <BottomNode bottomVal={this.props.tabJSON} myIndex={this.state.index}/>
                </div>)
        }
    }

    class TopNode extends React.Component{

        show(e){
            this.props.childShow(e.target.getAttribute('data-i'))
        }
        render(){
            let mBtn = [];
            for (let i = 0; i < this.props.topVal.length; i++) {
                mBtn.push(<button key={i} onClick={this.show.bind(this)} data-i={i} className={i == this.props.myIndex ? 'active':''}>{this.props.topVal[i]}</button>);
            }
            return (<div>{mBtn}</div>)
        }
    }

    class BottomNode extends React.Component{
        render(){
            let mDiv =[];
            for (let i = 0; i < this.props.bottomVal.topVal.length; i++) {
                // console.log(this.props.bottomVal.bottomVal[i])
                mDiv.push(<div className="mydiv" style={{display:i==this.props.myIndex? 'block':'none'}} key={i}>{this.props.bottomVal.bottomVal[i]}</div>)
            }
            return (<div>{mDiv}</div>)
        }
    }

    ReactDOM.render(<Tab tabJSON={{
        'topVal':['中国','瑞士','新西兰','美國'],
        'bottomVal':['很强大,很棒', '银行很棒','不知道啊'],
        'timer':1000
    }}/>,app)
</script>

</html>